<mat-tab-group mat-align-tabs="start" mat-stretch-tabs="false" disableRipple>
  <mat-tab [label]="'Auth.Varify' | translate: {Default: 'Varify'}">
    <div class="flex flex-col justify-start items-stretch mt-4">
      <mtx-alert *ngFor="let error of errors; let i = index" type="warning" dismissible (closed)="errors.splice(i, 1)">
          {{ 'Auth.' + error | translate: {Default: error} }}
      </mtx-alert>
      
      <mtx-alert *ngFor="let message of messages; let i = index" type="success" dismissible (closed)="messages.splice(i, 1)">
          {{ message }}
      </mtx-alert>
      
      <mat-divider style="margin: 1rem 0;"></mat-divider>
      
      <div class="flex justify-between items-center">
          <a routerLink="/auth/login">{{ 'Auth.Signin' | translate: {Default: 'Sign-in'} }}</a>
          <a routerLink="/auth/register">{{ 'Auth.Signup' | translate: {Default: 'Signup'} }}</a>
      </div>
    </div>
  </mat-tab>
</mat-tab-group>
